<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Activity Starter - App Inventor for Android
    </title>
    <link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="/static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="/static/css/appinventor.css" rel="stylesheet">
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
    <script>
  var tracker = new gweb.analytics.AutoTrack({
        profile: 'UA-5856106-2'
      });
    </script>
    <style>
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="/about/"><img alt="" src="/static/images/appinventor_logo.gif"></a>
          </div>
          <form action="http://www.google.com/cse" id="cse-search-box">
            <input name="cx" type="hidden" value="011848991959401852367:xnrcbhk2zus"> <input name=
            "ie" type="hidden" value="UTF-8">
            <div class="header-search">
              <div class="header-search-query">
                <input class="textbox" name="q" type="text">
              </div>
              <div class="header-search-button">
                <input name="sa" src="/static/images/search-button.png" type="image">
              </div>
            </div>
          </form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
         >
</script>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="/about/">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="/learn/">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="/forum/">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="http://appinventor.googlelabs.com/ode/Ya.html" target="_blank">My
              Projects</a>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="/learn/">Learn</a> &gt; <a href="/learn/reference/">Reference</a> &gt; Sizes
            &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Specifying sizes of components
              </h1>
              <p>
                When you create a visible component in the designer, you are typically given the
                opportunity to specify its height and width. There are three choices:
              </p>
              <ol>
                <li>
                  <i>Automatic:</i> Size is chosen by the system
                </li>
                <li>
                  <i>Fill parent:</i> Size is chosen to fill the space available.
                </li>
                <li>
                  <i>Size specified in pixels</i>
                </li>
              </ol>Since not all Android devices have he same screen size, it's good to avoid
              specifying sizes numerically as pixels if possible.
              <p>
                The notions of Automatic and Fill parent carry over to components that can contain
                other components, such as vertical and horizontal arrangements, as described below.
              </p>
              <h3>
                The Screen
              </h3>
              <p>
                The Screen component has a <code>Scrollable</code> property. When the Scrollable
                property is checked, the Screen component behaves like a VerticalArrangement whose
                Height property is set to Automatic. When the Scrollable property is not checked,
                the Screen component behaves like a VerticalArrangement whose Height property is
                specified in pixels.
              </p>
              <h3>
                VerticalArrangement
              </h3>
              <p>
                In a VerticalArrangement, components are arranged along the vertical axis,
                left-aligned.
              </p>
              <p>
                If a VerticalArrangement's <code>Width</code> property is set to Automatic, the
                actual width of the arrangement is determined by the widest component whose Width
                property is not set to Fill Parent. If a VerticalArrangement's Width property is
                set to Automatic and it contains only components whose Width properties are set to
                Fill Parent, the actual width of the arrangement is calculated using the automatic
                widths of the components. If a VerticalArrangement's Width property is set to
                Automatic and it is empty, the width will be 100.
              </p>
              <p>
                If a VerticalArrangement's <code>Height</code> property is set to Automatic, the
                actual height of the arrangement is determined by the sum of the heights of the
                components. <b>If a VerticalArrangement's Height property is set to Automatic, any
                components whose Height properties are set to Fill Parent will behave as if they
                were set to Automatic.</b>
              </p>
              <p>
                If a VerticalArrangement's Height property is set to Fill Parent or specified in
                pixels, any components whose Height properties are set to Fill Parent will equally
                take up the height not occupied by other components.
              </p>
              <h3>
                HorizontalArrangement
              </h3>
              <p>
                In a HorizontalArrangement, components are arranged along the horizontal axis,
                vertically center-aligned.
              </p>
              <p>
                If a HorizontalArrangement's <code>Height</code> property is set to Automatic, the
                actual height of the arrangement is determined by the tallest component whose
                Height property is not set to Fill Parent. If a HorizontalArrangment's Height
                property is set to Automatic and it contains only components whose Height
                properties are set to Fill Parent, the actual height of the arrangement is
                calculated using the automatic heights of the components. If a
                HorizontalArrangement's Height property is set to Automatic and it is empty, the
                height will be 100.
              </p>
              <p>
                If a HorizontalArrangement's <code>Width</code> property is set to Automatic, the
                actual width of the arrangement is determined by the sum of the widths of the
                components. <b>If a HorizontalArrangement's Width property is set to Automatic, any
                components whose Width properties are set to Fill Parent will behave as if they
                were set to Automatic.</b>
              </p>
              <p>
                If a HorizontalArrangement's Width property is set to Fill Parent or specified in
                pixels, any components whose Width properties are set to Fill Parent will equally
                take up the width not occupied by other components.
              </p>
              <h3>
                TableArrangement
              </h3>
              <p>
                In a TableArrangement, components are arranged in a grid of rows and columns, with
                not more than one component visible in each cell. <b>If multiple components occupy
                the same cell, only the last one will be visible.</b>
              </p>
              <p>
                Within each row, components are vertically center-aligned.
              </p>
              <p>
                The width of a column is determined by the widest component in that column. When
                calculating column width, the automatic width is used for components whose Width
                property is set to Fill Parent. <b>However, each component will always fill the
                full width of the column that it occupies.</b>
              </p>
              <p>
                The height of a row is determined by the tallest component in that row whose Height
                property is not set to Fill Parent. If a row contains only components whose Height
                properties are set to Fill Parent, the height of the row is calculated using the
                automatic heights of the components.
              </p>
              <h3>
                Canvas
              </h3>
              <p>
                Only Balls and ImageSprites can be placed in a Canvas. Each Ball and ImageSprite is
                positioned on the canvas based on its X and Y properties. A Ball's width and height
                is always the diameter of the ball. The actual width/height of an ImageSprite whose
                Width/Height property is set to Automatic or Fill Parent will be the width/height
                of the image.
              </p>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt=
              "Creative Commons License" class="c2" src=
              "http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/"
              rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              ©2011 Google<br>
              <a href="/about/index.html">About</a> | <a href="/about/privacy.html">Privacy</a> |
              <a href="/about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script>
  if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>